<script setup>

import Project from "./project.vue";
import Image from './image.vue'
import Artifact from './artifact.vue'
import Tag from './tag.vue'
import {ref} from "vue";

const MainBody = ref(Project);
const imageName = ref("")
const projectName = ref("")
const artifactName = ref("")
const currentPage = ref("project")

const handler = (type, name) => {
  console.log('handler', name)
  if (type === 'project') {
    MainBody.value = Image
    projectName.value = name
    currentPage.value = "image"
  } else if (type === 'image') {
    MainBody.value = Artifact
    imageName.value = name
    currentPage.value = "artifact"
  } else if (type === 'artifact') {
    MainBody.value = Tag
    artifactName.value = name
    currentPage.value = "tag"
  }
}

const goBack = () => {
  if (currentPage.value === 'tag') {
    handler('image', imageName.value)
  } else if (currentPage.value === 'artifact') {
    handler('project', projectName.value)
  } else if (currentPage.value === 'image') {
    currentPage.value = 'project'
    MainBody.value = Project
  }
}
</script>

<template>
  <div>
    <el-page-header @back="goBack">
      <template #title >
              <span>
                返回
              </span>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> {{ currentPage === 'project' ? "项目" : currentPage === 'image' ? projectName : currentPage === 'artifact' || currentPage === 'tag' ? imageName : '' }} </span>
      </template>
    </el-page-header>
    <component
        :is="MainBody"
        @handler="handler"
        v-bind:projectName="projectName"
        v-bind:imageName="imageName"
        v-bind:artifactName="artifactName"
    />
  </div>
</template>


<style scoped>
.layout {
  width: 100vw;
  height: 100vh;
  background-color: #00364d;
  color: #ffffff;
}

.layout-container {
  height: calc(100vh - 120px);
}

.layout-header {
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  align-items: center;
  background-color: #00464d;
}

.layout-footer {
  background-color: #00464d;
  text-align: center;
  line-height: 30px;
}

.layout-aside {
  background-color: #00363d;
}

.text-large {
  color: #ffffff;
}

.el-page-header {
  margin: 0 0 20px 0;
}
</style>